<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <!-- 当点击【点击下载模版】这个超链接时，单绑Vue的href会到data中取对应的属性值，进行下载模板 -->
          <a :href="defaultExcelTemplate">点击下载模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="选择Excel">
        <!--
            【上传头像时也写过类似的el-upload组件】
            （1）
            （2）:auto-upload="false"，表示不会自动上传，也就是用户点【选取文件】按钮选择好文件后，不会自动上传文件；
                                  让用户点【导入】按钮时，才会上传文件
            （3）:on-exceed="fileUploadExceed"，表示上传超过限制时【:limit="1"已经设置只能上传一个文件】，会回调函数
            （4）:on-success="fileUploadSuccess"，上传成功时，会回调相应的函数方法【绑定在methods中】
            （5）:on-error="fileUploadError"，上传失败时，会回调相应的函数方法
            （6）action，表示要上传的地址
                    此处不用再上传给阿里云OSS了，只需要传给后端，后端对EasyExcel进行解析，然后存入数据库中
                    用户再次访问的时候，只要从数据库拉取数据，显示到页面进行查看即可
            （7）name，是form表单文件名，后端在方法的参数上使用MultipartFile类型参数接收，参数名，必须与form表单文件名一致
            （8）:file-list="fileList"，表示要上传的文件列表，用来收集Excel的，跟Vue的data进行双绑
            name="subjectsFile"
        -->
        <el-upload
          ref="upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          :action="importURL"
          :limit="1"
          :on-exceed="fileUploadExceed"
          :on-success="fileUploadSuccess"
          class="upload-demo"
          name="subjectsFile"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传Excel文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
      importURL: 'http://localhost:8110/admin/edu/subject/import', // 向后端发送请求的地址
      // OSS_PATH是阿里云oss bucket地址，已经在config/dev.env.js中进行配置
      defaultExcelTemplate: process.env.OSS_PATH + '/excel/课程分类列表模板.xls', // 默认Excel模板
      importBtnDisabled: false // 导入按钮是否禁用
    }
  },
  methods: {
    // 【上传到服务器】按钮的单击事件
    submitUpload() {
      /*
      this代表vue对象，$refs代表在vue渲染的范围内【也就是div容器里面的内容】，
      使用ref定义属性值的一组标签对象
      例如：this.$refs.upload
      就代表去div容器内，找有refs定义属性的标签，并且refs的属性值为upload的
      一组标签内容【因为有可能有多组标签，会使用refs来定义属性，所以还得根据refs的属性
      值来定位到标签内容】
      也就会定位到<el-upload>这一组标签
      这一组标签用来做提交的，.submit()就是触发提交函数
      也就是当点击 【上传到服务器】这个按钮的时候，会触发submitUpload()单击事件
      在单击事件里面完成提交
      */
      this.$refs.upload.submit()
    },
    // 文件超出个数限制时的钩子函数
    fileUploadExceed(file, fileList) {
      console.log(file, fileList)
      this.$message.warning('一次只能上传一个Excel文件')
    },
    /*
     文件上传成功的回调[只要响应报文状态码为20000,都代表成功]
     因为我们在后端SubjectController的类中，返回R.ok()，所以前端请求发出去了
     后端无论处理失败还是成功，都是返回一个状态码都是20000，然后前端就会认为时是成功了
     所以还要对状态码进行判断
     如果状态码是20000，就说明是成功了
     如果状态码不是20000，就说明是失败了
     */
    fileUploadSuccess(response, file, fileList) {
      // console.log(response) // response是后台响应的r对象
      if (response.code === 20000) {
        this.$message.success('Excel文件上传成功')
      } else {
        this.$message.error(response.message)
      }
      // 点击 【上传到服务器】按钮后，清空页面中回显的文件列表
      this.fileList = []
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    }
  }
}
</script>
